<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	  <div id="box01">
		  <table border="1"> 
		     <tr>
				 <th>
					 <input type="checkbox" v-model="checkFlag" @click="checkAll"/>
				 </th>
				 <th>编号</th>
				 <th>姓名</th>
				 <th>成绩</th>
			 </tr>
			 <tr v-for="student in students">
				 <td>
					  <input type="checkbox" v-model="ids" :value="student.id"/>
				 </td>
				 <td>{{student.id}}</td>
				 <td>{{student.name}}</td>
				 <td>{{student.score}}</td>
			 </tr>
		  </table>
	  </div>
	</body>
	<script>
		//构建Vue，生成Vue对象vm（调度器），Vue()参数为json格式的数据（属性：值）；
		var vm=new Vue({
			//el参数用来绑定选择器，通过选择器找到对应的元素（标签||控件）
			el:"#box01",
			//声明data的参数用来项绑定的控件传值
			data:{
				students:[
					{id:1001,name:"张三",score:60},
					{id:1002,name:"李四",score:75},
					{id:1003,name:"王二",score:60}
				],
				checkFlag:false,
				ids:[]
			},
			methods:{
				checkAll(){
					if(!this.checkFlag){
						this.students.forEach((item,i) => {
							if(this.ids.includes(item.id)){
								this.ids.push(item.id)
							}
						});
					}else{
						this.ids=[];
					}
				}
			}
		});
	</script>
</html>
